
import Taro from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import $style from './index.module.scss'

export default (props:{onSelect:{(type:number) : void}}) => {
    const nextMargin = Taro.pxTransform(100)
    function selectType(type:number) {
        props.onSelect(type)
    }
    return <View className={$style.container}>
            <View className={$style.title}>有些事，问问别人，或许会更美好些~</View>
            <Swiper className={$style.swiper} next-margin={nextMargin}>
                <SwiperItem>
                    <View className={$style.typeItem} onClick={() => { selectType(1) }}>
                        <View className={$style.wrap}>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.imageTextLine}>
                                        <View className={$style.image}></View>
                                        <View className={$style.textLine + '  flex-1 m-l-30'}></View>
                                    </View>
                                </View>
                            </View>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.imageTextLine}>
                                        <View className={$style.image}></View>
                                        <View className={$style.textLine + '  flex-1 m-l-30'}></View>
                                    </View>
                                </View>
                            </View>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.imageTextLine}>
                                        <View className={$style.image}></View>
                                        <View className={$style.textLine + '  flex-1 m-l-30'}></View>
                                    </View>
                                </View>
                            </View>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.imageTextLine}>
                                        <View className={$style.image}></View>
                                        <View className={$style.textLine + '  flex-1 m-l-30'}></View>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                </SwiperItem>
                <SwiperItem>
                    <View className={$style.typeItem} onClick={() => { selectType(2) }}>
                        <View className={$style.wrap}>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.textLine}></View>
                                </View>
                            </View>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.textLine}></View>
                                </View>
                            </View>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.textLine}></View>
                                </View>
                            </View>
                            <View className={$style.row}>
                                <View className='w-100 xy absolute'>
                                    <View className={$style.textLine}></View>
                                </View>
                            </View>
                        </View>
                    </View>
                </SwiperItem>
                <SwiperItem>
                    <View className={$style.typeItem} onClick={() => { selectType(3) }}>
                        <View className={$style.wrap}>
                            <View className={$style.gridType}>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                                <View className={$style.item}></View>
                            </View>
                        </View>
                    </View>
                </SwiperItem>
            </Swiper>
        </View>
}